<template>
	<view class="order">
		<view class="order-title">订单状态：{{detail.status_text}}</view>

		<view class="order-subject">
			<view class="sub-item" v-for="(item,index) in detail.goodslist" :key="index">
				<view class="sub-child">
					<image :src="item.images[0]" class="sub-img"></image>
					<view class="sub-con">
						<view class="sub-con-name">{{item.title}}</view>
						<view style="color:rgba(134, 134, 134, 1);padding-top: 10px;">数量：x{{item.num}}</view>
						<view style="color: rgba(134, 134, 134, 1);padding-top: 10px;">价格 ：{{item.intergral}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sub-wrapper">
			<view class="sub-money">
				<view class="mon-title">商品总价：</view>
				<view class="mon-num">{{detail.total}}<text style="font-size: 12px;font-weight: normal;">（积分）</text></view>
			</view>
			<view class="sub-eit" v-if="detail.info">
				<view class="eit-title">留言备注：</view>
				<view class="eit-text">{{detail.info}}</view>
			</view>
		</view>
		<view class="sub-info">
			<view style="color: rgba(36, 36, 36, 1);font-size: 14px;font-weight: bold;padding-bottom: 14px;">订单信息</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;" v-if="detail.postalname">快递信息：{{detail.postalname}}</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;display: flex;align-items: center;" v-if="detail.postalcode">
				<view>快递编号：{{detail.postalcode}}</view>
				<button class="but-ok-small" @click="copy">复制</button>
			</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">订单号：{{detail.ordersn}}</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">下单时间：{{detail.created}}</view>
		</view>
		

		<!--已接单-->
		<view class="but-wrapper">
			<view class="but-ok" v-if="detail.status == 2" @click="showPopup(2)">
				<view class="ok-text">确认收货</view>
			</view>
			
			<view class="but-ok" v-if="detail.status == 1" @click="showPopup(1)">
				<view class="ok-text">取消订单</view>
			</view>
		</view>
		
		<!--取消订单,确认收货-->
		<uni-popup ref="recash" type="center" style="z-index: 999;">
			<view class="cash">
				<!-- <image src="/static/img/dingdan.png" class="cash-img"></image> -->
				<view class="cash-title" v-if="status == 1">取消订单</view>
				<view class="cash-title" v-if="status == 2">确认收货</view>
				<view class="cash-but" @click="cancleConfirmOrder" style="margin-top: 20px;">
					<view class="cash-left">确认</view>
				</view>
				<image @click="closeRecash" src="/static/img/guanbi_icon.png" class="cash-guan"></image>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
					id:'',
					detail:'',
					status:1,
				}
			},
			onLoad(options){
				if(options.id){
					this.id = options.id
				}
				this.getOrderDetail()
			},
			methods: {
				copy(){
					let that = this
					uni.setClipboardData({
						data: that.detail.postalcode
					});
				},
				closeRecash() {
					this.$refs.recash.close()
				},
				showPopup(status){
					this.$refs.recash.open()
					this.status = status;
				},
				//订单详情
			getOrderDetail(){
				//orderdetail
				let params = {
					id:this.id
				}
				this.$http.goods_order_detail(params).then(res => {
					this.detail = res.data
				})
			},
			//取消/确认订单
			cancleConfirmOrder() {
				let params = {
					status: this.status, //1取消 2确认
					id: this.detail.id //订单号
				}
				this.$http.cacelconfirm(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 0) {
						this.$refs.recash.close()
						this.getOrderDetail();
					}
				})
			},
		}
	}
</script>

<style scoped>
	.sub-con-name{
		color: rgba(36, 36, 36, 1);font-size: 15px;font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 466upx;
	}
	.order {
		background-color: #F6F6F6;
		width: 100%;
		padding-bottom: 80px;
	}

	.order-title {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		font-weight: bold;
		padding: 17px 0;
		text-align: center;
	}

	.order-header {
		background-color: #FFFFFF;
		padding: 15px 20px;
	}

	.man-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 14px;
	}

	

	.order-time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: rgba(187, 187, 187, 0.1);
		padding: 13px 7px;
		border-radius: 5px;
	}

	.time-text {
		color: rgba(52, 54, 51, 1);
		font-size: 14px;
	}

	.time-num {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
	}

	.stats-text {
		font-size: 17px;
		font-weight: bold;
		padding: 10px 15px;
	}

	.stats-num {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.order-subject{
		display: flex;
		flex-direction: column;
	}
	.sub-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 20px;
		margin-bottom: 2px;
	}
	
	.sub-img{
		width: 84px;
		height: 84px;
		border-radius: 5px;
	}
	
		
	.sub-child{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.sub-con{
		    flex: 1;
			padding-left: 16px;
	}
	.sub-wrapper{
		background-color: #FFFFFF;
		
	}
	.eit-text{
		width: 510upx;
	}
	.sub-money{
		padding: 17px 23px;
		border-bottom: 2px solid rgba(246, 246, 246, 1);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mon-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
	}
	.mon-num{
		color: #3E9AFC;
		font-size: 18px;
		font-weight: bold;
	}
	.sub-eit{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 23px 48px 23px;
	}
	.eit-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
		min-width: 80px;
	}
	.sub-info{
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 20px;
	}
	.sub-but{
		width: 100%;
		height:108upx;
		
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
		
box-shadow: 0px 2px 4px 0px #1E75FF;
		position: fixed;
		bottom: 0;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 108upx;
		color: #FFFFFF;
	}
	
	/*已接单*/
	.but-con {
		display: flex;
		flex-direction: row;
		width: 208upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid rgba(52, 54, 51, 1);
		font-size: 14px;
		color: #242424;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}
	
	.but-ok {
		display: flex;
		flex-direction: row;
		width: 209upx;
		height: 60upx;
		
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
		
box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius: 48upx;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
		margin-left: 14px;
	}
	
	.but-ok-small{
		width: 150upx;
		height: 30px;
		border-radius:15px;
		border:1px solid rgba(52,54,51,1);
		background-color: #fff;
		font-size: 14px;
		color: #2359FE;
		text-align: center;
		line-height: 30px;
		align-items: center;
		justify-content: center;
		margin-left: auto;
	}
	
	.but-con image {
		width: 16px;
		height: 16px;
	}
	
	.con-text {
		padding-left: 4px;
	}
	
	.but-wrapper {
		    display: flex;
		    flex-direction: row;
		    justify-content: flex-end;
		    align-items: center;
		    position: fixed;
		    width: 100%;
		    bottom: 0;
		    right: 0;
			padding-right: 15px;
		    background-color: #fff;
		    height: 54px;
	}
	
	/**/
	.cash {
		height: 226px;
		width: 548upx;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		padding: 0 25px;
		position: relative;
	}
	
	.cash-but {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 50px;
	}
	
	.cash-title {
		color: rgba(48, 52, 76, 1);
		font-weight: bold;
		font-size: 23px;
		padding: 20px 0;
	}
	
	.cash-text {
		color: #666666;
		text-align: left;
		font-size: 14px;
	}
	
	.cash-left {
		width: 555upx;
		height: 88upx;
		
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
		
box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius: 48upx;
		text-align: center;
		line-height: 88upx;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	
	.cash-right {
		width: 228upx;
		height: 34px;
		background: rgba(255, 95, 73, 1);
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		line-height: 34px;
	}
	
	.cash-img {
		width: 54px;
		height: 54px;
		margin-top: -54upx;
	}
	
	.cash-guan {
		width: 21px;
		height: 21px;
		position: absolute;
		right: 20px;
		top: 20px;
	}
</style>
